<template>
  <div id="individualIncomeTax" class="cardPage">
    <div class="pageHead">
      <el-form ref="headParams" :model="headParams" class="headParams">
        <el-form-item>
          <el-date-picker v-model="headParams.Year" :clearable="false" type="year" format="yyyy 年" value-format="yyyy" placeholder="选择年份"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round size="medium" :loading="isConfirmLoading" @click="getTableData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <!-- 如果不是是本年数据，并且每月数据全为空，显示暂无数据 -->
      <p class="nullTip" v-if="recordDate != new Date().getFullYear() && TableData.every(e => e.listWages.length == 0)">暂无数据</p>
      

      <div v-else class="monthlyList" v-loading="loading">
        <!-- 如果是本年，并且当月数据为空,显示请前往生成工资表 -->
        <el-card v-if="recordDate == String(new Date().getFullYear())&&TableData.length > 0 && TableData[new Date().getMonth()].listWages.length == 0" class="thisMonth">
          <div slot="header">
            <span>本月</span>
          </div>
          <p class="tip">工资表暂未生成，请<el-link type="primary" :underline="false" @click="handleToPayroll">前往</el-link>生成</p>
        </el-card>
        <el-card class="monthlyItem" v-for="(item,index) in TableData" :key="index" :header="item.mobnth +'月'" v-show="item.listWages.length > 0">
          <div class="infoItem" v-for="(info,ind) in item.listWages" :key="ind">
            <div class="baseInfo">
              <p class="name">{{info.name}}</p>
            </div>
            <div class="total">
              <span>总人数</span>
              <span>{{info.peopleNumber}}人</span>
            </div>
            <div class="reportList">
              <el-table :data="[ 
              {name:'人员信息表',taxRules:0, remark:test,wageIds:info.wageIds,mobnth:item.mobnth},
              {name:info.taxRules==1?'正常工资薪金申报表':'劳务报酬申报表', taxRules: info.taxRules, remark: info.taxRules==1 ? test1 : test2, wageIds: info.wageIds, mobnth:item.mobnth}
              ]" row-class-name="tableRow">
                <el-table-column label="报表名称" width="120px" prop="name"></el-table-column>
                <el-table-column label="报表描述" prop="remark"></el-table-column>
                <el-table-column label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-button type="text" class="downLoadBtn" @click="downLoad(scope.row)">下载</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'individualIncomeTax',
  data() {
    return {
      headParams: {
        Year: String(new Date().getFullYear()),
      },
      recordDate: String(new Date().getFullYear()), // 用于记录当前列表的年份，在查询成功时更新（防止切换年份导致列表显示变化）
      TableData: [],
      loading: false,
      isConfirmLoading: false,
      test: '企业使用自然人税收管理系统申报员工个税时的人员信息导入表',
      test1: '企业使用自然人税收管理系统申报员工个税时的个税申报导入表',
      test2: '企业使用自然人税收管理系统申报员工个税时的劳务报酬所得表'
    };
  },
  methods: {

    /**
     * 个人所得税列表
     */
    getTableData() {
      if(!this.headParams.Year) {
        return this.$message.warning('请选择年份');
      }
      let params = {
        ...this.headParams
      };
      this.isConfirmLoading = true;
      this.loading = true;
      this.$api.individualTax.GetIndividualIncomeView(params).then(res => {
        this.recordDate = this.headParams.Year;
        this.TableData = res.data.data.individualIncomeDtoViews;
        this.isConfirmLoading = false;
        this.loading = false;
        console.log(this.TableData.length);
      }).catch(() => {
        this.isConfirmLoading = false;
        this.loading = false;
      });
    },
    openUrl(url) {
      window.open(url);
      // const a = document.createElement('a');
      // a.href = url;
      // document.body.appendChild(a);
      // a.click();
    },
    downLoad(row) {
      let params = {
        Year: Number(this.headParams.Year),
        Month: row.mobnth,
        WageIds: row.wageIds,
      };
      this.loading = true;
      if (row.taxRules == 0) { // 人员信息表
        this.$api.individualTax.UplodUsersFile(params).then(res => {
          this.openUrl(res.data.data);
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      } else if (row.taxRules == 1) {// 正常工资薪金申报表
        this.$api.individualTax.UplodNaturalWagesFile(params).then(res => {
          this.openUrl(res.data.data);
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      } else if (row.taxRules == 2) {// 劳务报酬申报表
        this.$api.individualTax.UplodRemunerationFile(params).then(res => {
          this.openUrl(res.data.data);
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    /**
     * @description 前往工资表页
     */
    handleToPayroll() {
      this.$router.push({
        path: '/salarySheet',

      })
    },
  },
  // mounted() {
  //   this.getTableData();
  // },
  activated() {
    this.getTableData();
  }
};
</script>
<style lang="less" scoped>
@import url("../less/common.less");

#individualIncomeTax {
  .nullTip {
    color: #999999;
    text-align: center;
    font-size: 14px;
    height: 80px;
    line-height: 80px;
  }

  .monthlyList {
    padding-right: 5px;
  }

  :deep(.el-table) {
    width: 100%;

    &::before {
      background-color: transparent;
    }

    .tableRow .el-table__cell .cell {
      color: #666666 !important;
    }

    th.el-table__cell>.cell {
      font-weight: 600;
      font-size: 14px !important;
      text-align: left;
    }

    td.el-table__cell,
    th.el-table__cell.is-leaf {
      border-bottom: none;
    }

    .el-table__cell {
      padding: 0;
    }
  }

  .infoItem {

    .baseInfo,
    .total {
      width: 200px;
      min-width: 120px;
      // padding-right: 30px;
      height: 50px;

      .name {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .total {
      border: 1px solid #cbcbcb;
      border-bottom: none;
      border-top: none;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        &:last-child {
          margin-top: 15px;
          color: #666666;
        }
      }
    }

    .reportList {
      flex: 1;
      padding-left: 30px;
      overflow: auto;

      .downLoadBtn {
        padding: 0 !important;
      }
    }
  }
}
.tip {
  text-align: center;
  margin: 20px 0;
}
</style>